import { Button, Card, Checkbox, Form, Input, Space, message } from "antd"
import { callMethod, genReqData, type MethodWithServiceInfo } from "@linksaas-minapp/grpc-proxy-api"
import CodeEditor from '@uiw/react-textarea-code-editor'
import { useEffect, useState } from "react";
import { writeText } from '@tauri-apps/api/clipboard'
import type { GrpcServerInfo } from "@linksaas-minapp/api/extra_info";

export interface MethodCallProps {
    grpcApiId: string;
    method: MethodWithServiceInfo;
    grpcInfo: GrpcServerInfo;
}

function MethodCall(props: MethodCallProps) {
    const [grpcInfo, setGrpcInfo] = useState(props.grpcInfo);
    const [reqData, setReqData] = useState("{}");
    const [respData, setRespData] = useState("");

    const loadReqData = async () => {
        const data = await genReqData(props.grpcApiId, props.method.serviceName, props.method.method.methodName);
        console.log(data);
        setReqData(data.replace(/\n\n/g, "\n"));
    };

    useEffect(() => {
        loadReqData();
    }, [props.grpcApiId]);

    return (
        <div style={{ display: "flex" }}>

            <Card style={{ flex: 1 }} bodyStyle={{ height: "calc(100vh - 100px)", paddingBottom: "10px", overflow: "hidden" }}
                title={<h1 style={{ fontSize: "16px", fontWeight: 700 }}>请求</h1>}
                extra={
                    <Space size="large">
                        <Button onClick={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            loadReqData();
                            setRespData("");
                        }}>重置请求</Button>
                        <Button type="primary" onClick={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            setRespData("");
                            if (grpcInfo != null) {
                                callMethod(props.grpcApiId, props.method.serviceName, props.method.method.methodName, grpcInfo.addr ?? "", grpcInfo.secure ?? false, reqData).then(res => setRespData(res.replace(/\n\n/g, "\n")));
                            }
                        }}>发送请求</Button>
                    </Space>
                }>
                <Form>
                    <Form.Item label="服务地址" help={
                        <>
                            {grpcInfo.addr != undefined && grpcInfo.addr.includes(":") == false && (
                                <span style={{ color: "red" }}>缺少端口信息</span>
                            )}
                        </>
                    }>
                        <Input value={grpcInfo.addr??""} onChange={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            setGrpcInfo({ ...grpcInfo, addr: e.target.value.trim() });
                        }} />
                    </Form.Item>
                    <Form.Item label="安全模式">
                        <Checkbox checked={grpcInfo.secure ?? false} onChange={e => {
                            e.stopPropagation();
                            setGrpcInfo({ ...grpcInfo, secure: e.target.checked });
                        }} />
                    </Form.Item>
                </Form>
                <CodeEditor
                    value={reqData}
                    language="json"
                    minHeight={200}
                    onChange={(e) => {
                        e.stopPropagation();
                        e.preventDefault();
                        setReqData(e.target.value);
                    }}
                    style={{
                        fontSize: 14,
                        backgroundColor: '#f5f5f5',
                        height: "calc(100vh - 240px)",
                        overflow: "scroll",
                        // border:"1px solid red"
                    }}
                />
            </Card>
            <Card style={{ flex: 1 }}
                title={<h1 style={{ fontSize: "16px", fontWeight: 700 }}>响应</h1>}
                bodyStyle={{ height: "calc(100vh - 100px)", paddingBottom: "10px", overflow: "hidden" }}
                extra={
                    <Button type="primary" disabled={respData == ""} onClick={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        writeText(respData).then(() => {
                            message.info("已复制到剪切板");
                        });
                    }}>复制响应</Button>
                }>
                <CodeEditor
                    value={respData}
                    language="json"
                    minHeight={200}
                    readOnly
                    style={{
                        fontSize: 14,
                        backgroundColor: '#f5f5f5',
                        height: "calc(100vh - 134px)",
                        overflow: "scroll",
                        // border:"1px solid red"
                    }}
                />
            </Card>
        </div>
    );
}

export default MethodCall;